<template>
  <!-- 预约咨询 -->
  <div  style="padding: 0px 10px; ">
      <h2 style="text-align: center; padding: 30px" class="bcl">投诉/建议</h2>
      <!-- 表单 -->
      <el-form ref="formStata" :model="formStata"  style="width: 100%" :rules="rules" label-position="top">
        <div class="contact-information" >
          <!-- 时间 -->
          <el-form-item label="事件发生日期时间" >
              <van-tabs v-model="activeData" color="black" >
                <van-tab v-for="item in datas" :title="momentToStr(item)" :name="item.format('YYYY-MM-DD')">
                  <van-tabs v-model="activetime" type="card" color="black" style="margin-top: 5%; height: 30pxs;">
                    <van-tab title="9:00-11:30" name="9:00-11:30"></van-tab>
                    <van-tab title="14:00-17:00" name="14:00-17:00"></van-tab>
                    <van-tab title="19:00-21:00" name="19:00-21:00"></van-tab>
                  </van-tabs>
                </van-tab>
              </van-tabs>
          </el-form-item>
          <el-form-item label="1.姓名" prop="name">
            <input type="text" name="" id="" v-model="formStata.name" />
          </el-form-item>
          <el-form-item label="2.电话" prop="complain_phone">
            <input type="text" name="" id="" v-model="formStata.complain_phone" />
          </el-form-item>
          <el-form-item label="3.投诉对象" prop="shore_value">
            <van-field
              readonly
              clickable
              :value="formStata.shore_value"
              placeholder="选择投诉对象"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
              />
            </van-popup>
          </el-form-item>
          <el-form-item label="4.投诉内容" prop="contents">
            <van-field
              v-model="formStata.contents"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入投诉内容"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="上传证据" >
            <el-upload
              ref="upload"
              class="upload-demo"
              style="width: 80px"
              drag
              action="http://localhost:9000/upload"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="uploadVoucherSuccess"
              :before-upload="beforeVoucherUpload"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                <em>点击上传文件或图片凭证</em>
              </div>
              <div class="el-upload__tip" slot="tip"></div> 
            </el-upload>
          </el-form-item>
        </div>
        <el-button 
          type="primary" 
          @click="submit(formStata)" style="width: 100%; margin-bottom: 50px; color:aliceblue; background-color: black;" 
          class="bcl">提交预约</el-button>
      </el-form>
       <!-- 没有添加心愿单 -->
      <div class="notbox" v-if="notbaby">
        <span>你还没有登录，请先登录</span>
        <span>请先去<a href="/login">登录</a></span>
      </div>
  </div>
</template>

<script>
// main.js
import moment from 'moment'
export default {
  data() {
      return {
        notbaby:true,
        showPicker: false,
        columns: ['系统建议'],
        datas: [],  
        activetime:'9:00-11:30',
        activeData:`${moment()}`,
        formStata:{
          complain_time: '',
          name:'',
          complain_phone:'',
          use_id:this.$store.state.uid,
          shore_id:'',
          shore_value:'',
          proofimg:'',
          contents:'',
        },
        // 定义验证规则
        rules: {
          name: [{ required: true, message: "用户名必填", trigger: "blur" }],
          complain_phone: [
            { required: true, message: "必填", trigger: "blur" },
            { pattern: /^1[3-9]\d{9}$/, message: "手机号错误", trigger: "blur" },
          ],
          shore_value:[
            { required: true, message: "必填", trigger: "blur" },
          ],
          contents:[
            { required: true, message: "必填", trigger: "blur" },
            { min: 1, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        },
      };
  },
  methods: {
      // 时间
      momentToStr(item){
          let Week = ['日', '一', '二', '三', '四', '五', '六']
          // 获取星期几，得到：0,1,2,3,4,5,6
          let d = item.format('d')
          let str  = item.format(`周${Week[parseInt(d)]} MM月DD日`)
          return str
      },
      data(){
         // 构造连续7天的moment对象
        for(let i = 0 ; i< 7; i++){
          // add()添加，days当前时间
          let m = moment().add(i,'days')
          this.datas.push(m)
        }
      },
      // 选择
      onConfirm(value,index) {
        this.formStata.shore_value = value
        this.formStata.shore_id = index
        this.showPicker = false;
      },
      complainStore(){
        this.axios.post("/complaint/store").then((res) => {
          if(res.data.code === 200){
            res.data.results.map( item =>{
                this.columns.push( item.Chinese)
            })
          }
        })     
      },
      // 上传
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，共选择了 ${files.length + fileList.length} 个文件，如有多张照片请先上传最明确的照片或者文件，其中自行保存等工作人员核实`);
       },
      // 处理上传之前的格式大小验证
      beforeVoucherUpload(file) {
        const isJPG = file.type === 'image/jpeg' || 'application/pdf';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式,文件只能为PDF格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    
      uploadVoucherSuccess(res, file) {
        this.formStata.proofimg = res.data
      },

      // 提交
      submit(formStata) {
        this.formStata.complain_time = this.activeData+' '+this.activetime
        this.$refs.formStata.validate((valid) => {
          if (valid) {
            console.log(this.formStata,'表格');
            let params = `use_id=${this.formStata.use_id}&shore_id=${this.formStata.shore_id}&proofimg=${this.formStata.proofimg}&complain_phone=${this.formStata.complain_phone}&complain_time=${this.formStata.complain_time}&contents=${this.formStata.contents}&name=${this.formStata.name}&shore_value=${this.formStata.shore_value}`;
            this.axios.post("/complaint", params).then((res) => {
                console.log(res,"yuy");
                if(res.data.code == 200){
                  this.$message({
                    message: '恭喜预约成功，请耐心等待来电',
                    type: 'success'
                  });
                // this.$router.go(-1);
                }else if(res.data.code === 201){
                  this.$message({
                    message: '感谢你的支持，请不能重复预约',
                    type: 'warning'
                  });
                }
            });
          }
        })
      },
  },
  mounted(){
    if( this.$store.state.uname){
       this.notbaby= false
    }
    this.data()
    this.complainStore()
  }
};
</script>
<style scoped src="@/assets/CSS/appointment.css">
</style>
<style lang="scss" scoped>


.contact-information {
  margin: 20px 0;
  margin-top: 3vw;
  border: 1px solid white;
  background-color: white;
  border-radius: 7px;
  box-shadow:3px 5px ghostwhite ;
  padding: 8px;
  input {
      width: 80vw;
      height: 30px;
      border: 1px solid gray;
      border-radius: 5px;
      // margin: 10px 0;
      // padding:0 5px;
  }
}

.van-button--block {
  border: 1px solid gray;
  border-radius: 5px;
}

// ::v-deep .van-field__body{
//   height: 30px;
//   border: 1px solid gray;
//   border-radius: 5px;
//   padding:0 5px;
// }
::v-deep .el-form-item__label{
   padding: 0;
}
::v-deep .el-upload-dragger{
  width: 330px;
}

</style>
